<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">


			<table>
					<tr >
						<td style="padding:5px;">
							
							用户名:

						</td>
						<td style="padding:5px;">
							
							<input type="text" v-model="username" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							密码:

						</td>
						<td style="padding:5px;">
							
							<input type="password" v-model="password" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							验证码:

						</td>
						<td style="padding:5px;">
							
							<input type="text" v-model="code" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							

						</td>
						<td style="padding:5px;">
							
							<img  @click="changeimg" :src="src" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							

						</td>
						<td style="padding:5px;">
							
							<Button @click="submit">提交</Button> &nbsp;&nbsp;

							<Button @click="reset" color="green">重置</Button>

						</td>
					</tr>

			</table>
			
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'注册页面'}],
      username:'',
      password:'',
      code:'',
      src:'http://localhost:8000/code/'
    }
  },
  //注册组件标签
  components:{

  		'myheader':myheader

  },
  mounted:function(){

   
  
},
  methods:{

  	//刷新验证码
  	changeimg:function(){

  		//随机字符串
  		var num = Math.ceil(Math.random()*10);
  		//赋值地址
  		this.src = this.src + "?code=" + num;

  	},
  	//重置
  	reset:function(){

  		this.username = '';
  		this.password = '';

  	},
  	//提交注册
  	submit:function(){

  		if(this.username == ''){

  			//alert('用户名不能为空');
  			this.$Message('用户名不能为空');
  			return false;
  		}

  		if(this.password == ''){

  			//alert('用户名不能为空');
  			this.$Message('密码不能为空');
  			return false;
  		}

  		//发送请求
  		this.axios.get('http://localhost:8000/register/',{params:{username:this.username,password:this.password,code:this.code}}).then((result) =>{

  						console.log(result);
  						this.$Message(result.data.message);

  		});



  	}

     
  }
}


</script>
 
<style>



</style>